<template>
    <div id="home">
        <Carousel autoplay loop>
            <CarouselItem v-for="item in imgs" :key="item">
                <img :src="item" alt="" style="width: 100%">
            </CarouselItem>
        </Carousel>

        <block :detail="insurances[3].AccidentInsurance" name="AccidentInsurance" id="4">
            <h2 slot="block">意外险</h2>
            <img src="../assets/img/home/accident.jpg" alt="" slot="img">
            <h3 slot="title">E生平安 · 意外险</h3>
        </block>
        <block :detail="insurances[2].IllnessInsurance" name="IllnessInsurance" id="3">
            <h2 slot="block">重疾险</h2>
            <img src="../assets/img/home/illness.jpg" alt="" slot="img">
            <h3 slot="title">E生平安 · 重疾险</h3>
        </block>
        <block :detail="insurances[4].EndowmentInsurance" name="EndowmentInsurance" id="5">
            <h2 slot="block">养老保险</h2>
            <img src="../assets/img/home/pension.jpg" alt="" slot="img">
            <h3 slot="title">养老无忧险</h3>
        </block>
        <block :detail="insurances[0].LifeInsurance" name="LifeInsurance" id="1">
            <h2 slot="block">人寿险</h2>
            <img src="../assets/img/home/support.jpg" alt="" slot="img">
            <h3 slot="title">E生平安 · 人寿险</h3>
        </block>
        <block :detail="insurances[1].EducationInsurance" name="EducationInsurance" id="2">
            <h2 slot="block">子女教育</h2>
            <img src="../assets/img/home/education.jpg" alt="" slot="img">
            <h3 slot="title">教育保险</h3>
        </block>
    </div>
</template>

<script>
    import Block from "../components/common/Block"
    import homeImage1 from "../assets/img/carousel-1.png"
    import homeImage2 from "../assets/img/carousel-2.png"
    import homeImage3 from "../assets/img/carousel-3.png"
    import homeImage4 from "../assets/img/carousel-4.png"

    export default {
        name: "Home",
        components: {
            Block
        },
        data () {
            return {
              imgs: [homeImage1,homeImage2,homeImage3,homeImage4],
              insurances: []
            }
        },
        methods: {
          getInsurances () {
            this.$http.get('/insurance/index').then(res => {
              if (res.status === 200) {
                if (res.data.code === 200) {
                  this.insurances = res.data.data
                } else {
                  this.$Message.error(res.data.msg)
                }
              }
            }).catch(err => {
              this.$Message.error(err.toString())
            })
          }
        },
        mounted() {
          this.getInsurances()
        }
    }
</script>

<style scoped>

</style>